{% extends 'base.html' %}
{% block title %}
    个人中心
{% endblock %}
{% block middle %}
    {% csrf_token %}
    <div class="layui-layout layui-layout-admin">
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="docDemoTabBrief">
                    <li class="layui-nav-item layui-nav-itemed">
                        <dd class="layui-this"><a href="javascript:;">活动</a></dd>
                        {#                        <dd><a href="javascript:;">列表二</a></dd>#}
                        {#                        <dd><a href="javascript:;">列表三</a></dd>#}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">审核中</li>
                    <li>审核后</li>
                </ul>
                <div class="layui-tab-content" style="height: 600px;">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="table1" lay-filter="table1"></table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="pass">通过</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="nopass">不通过</a>
                        </script>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="table2"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#table1'
                , url: '/exa_active1/'
                , method: 'get'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'id', width: 80, title: 'ID'}
                    , {field: 'title', title: '活动主题'}
                    , {field: 'enrolltime', title: '报名时间'}
                    , {field: 'acttime', title: '活动时间'}
                    , {field: 'number', title: '报名人数'}
                    , {field: 'place', title: '活动地点'}
                    , {field: 'club', title: '承办社团', sort: true}
                    , {field: 'pl_obj', title: '申请人', sort: true}
                    , {field: 'status', title: '申请状态', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
            });
            table.render({
                elem: '#table2'
                , url: '/exa_active2/'
                , method: 'get'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'id', width: 80, title: 'ID'}
                    , {field: 'title', title: '活动主题'}
                    , {field: 'enrolltime', title: '报名时间'}
                    , {field: 'acttime', title: '活动时间'}
                    , {field: 'number', title: '报名人数'}
                    , {field: 'place', title: '活动地点'}
                    , {field: 'club', title: '承办社团', sort: true}
                    , {field: 'pl_obj', title: '申请人', sort: true}
                    , {field: 'status', title: '申请状态', sort: true}
                ]]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
            });
            table.on('tool(table1)', function (obj) {
                var data = obj.data;
                var tr = obj.tr;
                var id = tr.find('td[data-field="id"]')
                if (obj.event === 'pass') {
                    layer.confirm('确定审核通过吗', function (index) {
                        if (index) {
                            var da = {
                                'id': id.text(),
                                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                            }
                            $.ajax({
                                url: '/success/',
                                type: 'post',
                                data: da,
                                success: function (data) {
                                    if (data.status == 100) {
                                        location.href = '/backend/'
                                    }
                                    else {
                                        alert(data.msg)
                                    }
                                }
                            })
                        }
                    });
                } else if (obj.event === 'nopass') {
                    layer.prompt({
                        formType: 2,
                        title: '未通过原因',
                    }, function (value, index) {
                        var da = {
                            'id': id.text(),
                            'fail': value,
                            'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                        }
                        $.ajax({
                            url: '/fail/',
                            type: 'post',
                            data: da,
                            success: function (data) {
                                if (data.status == 100) {
                                    location.href = '/backend/'
                                }
                                else {
                                    alert(data.msg)
                                }
                            }
                        })
                    });
                }
            });
        });
    </script>
{% endblock %}